<template>
  <view class="manager-item-box">
    <ve-card
      :title="managerItem.licenseNo || '-'"
      :sub-title="managerItem.operateStatusName"
      :type="getStatus(managerItem.operateStatus)"
      @click="onDetailClick"
    >
      <ve-cell label="车牌号">{{ managerItem.licenseNo || '-' }}</ve-cell>
      <ve-cell label="状态">{{ managerItem.operateStatusName }}</ve-cell>
      <ve-cell label="车架号">{{ managerItem.vin }}</ve-cell>
      <ve-cell label="归属门店">{{ managerItem.siteName }}</ve-cell>
      <ve-operate-list :operates="operates" :record="managerItem" />
    </ve-card>

    <!-- TODO:晓强把处置车辆和更换车牌号放到了list页面，注释掉 -->
    <!-- 处置车辆 -->
    <!-- <DisposePlate v-model:visible="plate.disposeVisible" :id="plate.id" @confirm="onConfirmDispose" /> -->

    <!-- 更换车牌号 -->
    <!-- <ReplicePlate v-model:visible="plate.repliceVisible" :id="plate.id" :plateNumber="managerItem.licenseNo" @confirm="onConfirmReplice" /> -->

    <ve-modal title="确认删除？" v-model="visible" @confirm="onConfirm" @close="onClose" :okLoading="okLoading">
      <view class="font-medium">
        删除车辆将会连带删除此车辆关联的运维单以及运维单的财务数据和待办数据，车辆相关的订单和订单的财务数据仍保留，但会导致被删车辆订单的部分操作无法进行。如需保留此车辆关联的全部数据，请使用车辆【处置】功能
      </view>
      <view class="checkbox-box">
        <ve-checkbox-group @change="onChange">
          <ve-checkbox :key="1" v-model="isRead" name="我已阅读并知晓风险"> 我已阅读并知晓风险 </ve-checkbox>
        </ve-checkbox-group>
      </view>
    </ve-modal>
  </view>
</template>
<script setup lang="ts">
  import { getStatus } from '../../car-manager/models'
  // import DisposePlate from './dispose-plate.vue'
  // import ReplicePlate from './replice-plate.vue'
  import { deleteCar } from '@/api/asset/car-manager'
  import { userStore } from '@/stores'
  import { ref } from 'vue'

  const props = defineProps({
    managerItem: {
      type: Object,
      default: () => ({}),
    },
    resetRefresh: {
      type: Function,
      default: () => {},
    },
    from: {
      type: String,
      default: '',
    },
  })

  const visible = ref(false)
  const userInfoStore = userStore()
  const { role } = userInfoStore.profile
  const rowRecord = ref<any>({})
  const isRead = ref(false)

  // operateStatus: 40 处置
  const operates = ref([
    {
      label: '费用信息',
      permission: 'svmsapp:car-return.fee',
      // show: (record) => record.status !== '已处置',
      method: (record: any) => {
        console.log(record)
        uni.navigateTo({
          url: `/pages/asset/car-manager/fee-info?id=${record.id}`,
        })
      },
    },
    {
      label: '删除',
      // permission: 'svmsapp:car-return.delete',
      show: (record) => role.some((item: any) => item.adminRole === 1),
      method: (record: any) => {
        console.log(record)
        visible.value = true
        rowRecord.value = record
      },
    },
  ])

  // const plate = reactive({
  //   repliceVisible: false,
  //   disposeVisible: false,
  //   id: props.managerItem.id,
  // })

  const onDetailClick = () => {
    const permissions = userInfoStore.permissons
    if (permissions.includes('svmsapp:car-return.detail')) {
      uni.navigateTo({ url: `/pages/asset/car-manager/detail/index?id=${props.managerItem.id}&from=${props.from}` })
    }
  }

  // const onConfirmDispose = (form: any) => {
  //   disposeCar(form)
  //     .then(() => {
  //       console.log('处置车辆成功')
  //       plate.disposeVisible = false
  //     })
  //     .catch((error) => {
  //       uni.showToast({
  //         title: error.data.message,
  //         icon: 'none',
  //         mask: true,
  //       })
  //     })
  // }

  // const onConfirmReplice = (form: any) => {
  //   changeLicenseNo(form).then(() => {
  //     plate.repliceVisible = false
  //     props.resetRefresh()
  //   })
  // }

  const okLoading = ref(false)
  const onConfirm = () => {
    if (isRead.value) {
      okLoading.value = true
      deleteCar({ id: rowRecord.value.id })
        .then(() => {
          visible.value = false
          props.resetRefresh()
        })
        .finally(() => {
          setTimeout(() => {
            okLoading.value = false
          }, 500)
        })
    } else {
      uni.showToast({
        title: '请阅读上述风险并完成勾选',
        icon: 'none',
        mask: true,
      })
    }
  }

  const onClose = () => {
    okLoading.value = false
    isRead.value = false
  }

  const onChange = (option: any) => {
    console.log('option', option)
    if (option.length > 0) {
      isRead.value = option[0].checked
    } else {
      isRead.value = false
    }
  }
</script>
<style scoped lang="less">
  .font-medium {
    font-weight: 500;
  }
  .checkbox-box {
    display: flex;
    justify-content: flex-end;
    padding: 32rpx 0;
  }
  .manager-item-box {
    .card-footer {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0;

      .operate-list {
        width: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #8491a8;
      }

      .ve-button {
        margin-left: 24rpx;
        margin-bottom: 24rpx;
      }
    }
  }
</style>
